<template>
  <footer class="flex justify-between items-center">
    <a-tabs
      v-model:activeKey="activeKey"
      type="editable-card"
      size="small"
      :hideAdd="true"
      @edit="onEdit"
      :tabBarGutter="6"
      @change="tabsChange"
    >
      <a-tab-pane
        v-for="i in routerHistory"
        :key="i.id"
        :tab="i.content"
        :closable="i.closable"
      ></a-tab-pane>
    </a-tabs>
    <div>
      <a-button @click="refresh" :disabled="isLoading">
        <redo-outlined v-if="!isLoading" />
        <loading-outlined v-if="isLoading" />
      </a-button>
    </div>
  </footer>
</template>

<script setup lang="ts">
  import { RedoOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import router from '@/router';
  import { useUtilsStoreWithOut } from '@/stores/modules/utils';

  const { activeKey, routerHistory } = storeToRefs(useUtilsStoreWithOut());
  let isLoading = ref(false);
  const onEdit = (targetKey: number, action: string) => {
    if (action === 'remove') {
      let temporaryIndex = targetKey;
      for (const i in routerHistory.value) {
        // 相同就删除
        if (routerHistory.value[i].id === targetKey) {
          routerHistory.value.splice(Number(i), 1);
          temporaryIndex = Number(i) - 1;
          break;
        }
      }
      // 选中的和删除的是同一个
      if (activeKey.value === targetKey) {
        activeKey.value = routerHistory.value[temporaryIndex].id;
        router.push(routerHistory.value[temporaryIndex].path);
      }
    }
  };
  // 切换面板的函数
  const tabsChange = (activeKey: number) => {
    for (const i of routerHistory.value) {
      if (i.id === activeKey) {
        router.push(i.path);
        break;
      }
    }
  };
  const refresh = () => {
    isLoading.value = true;
    router.push({ name: 'refresh' });
    let timer = null as any;
    timer = setTimeout(() => {
      isLoading.value = false;
      clearTimeout(timer);
    }, 1000);
  };
</script>

<style scoped>
  :deep(.ant-btn) {
    @apply dark:(bg-[#151515] border-[#303030] text-light-900);
  }
  :deep(.anticon-close) {
    @apply dark:text-light-900;
  }
</style>
